// Copyright © SixtyFPS GmbH <info@slint-ui.com>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-commercial

import { Button, GroupBox, SpinBox, ComboBox, CheckBox, LineEdit, TabWidget, VerticalBox, HorizontalBox,
    Slider, SpinBox } from "std-widgets.slint";
import { GallerySettings } from "../gallery_settings.slint";
import { Page } from "page.slint";

export component ControlsPage inherits Page {
    title: "Controls";
    description: "This page gives an overview of the default widget set provided by Slint. The widgets are available in different styles native, fluent-(dark/light) and material-(dark/light). The widgets can be imported from \"std-widgets.slint\".";

    GroupBox { 
        vertical-stretch: 0;
        title: "Buttons";

        HorizontalLayout {  
            spacing: 8px;
            alignment: start;

            Button {
                text: "Regular Button";
                enabled: !GallerySettings.widgets-disabled;
            }   

            Button {
                text: "Button with Icon";
                icon: @image-url("../../thumbsup.png");
                enabled: !GallerySettings.widgets-disabled;
            }

            Button {
                checkable: true;
                text: self.checked ? "ON" : "OFF";
                enabled: !GallerySettings.widgets-disabled;
            }
        }
    }

    GroupBox {
        title: "CheckBox - SpinBox - ComboBox";
        vertical-stretch: 0;

        HorizontalBox {
            alignment: start;
            checkbox := CheckBox {
                text: checkbox.checked ? "(checked)" : "(unchecked)";
                checked: true;
                enabled: !GallerySettings.widgets-disabled;
            }


        SpinBox {
            vertical-stretch: 0;
            value: 42;
            enabled: !GallerySettings.widgets-disabled;
        }

            ComboBox {
                model: ["Select Something", "From this", "Combobox"];
                enabled: !GallerySettings.widgets-disabled;
            }
        }
                    
        
    }

    GroupBox {  
        title: "LineEdit";
        vertical-stretch: 0;

        LineEdit {
            placeholder-text: "Enter some text";
            enabled: !GallerySettings.widgets-disabled;
        }
    }

    GroupBox {  
        title: "Slider";
        vertical-stretch: 0;

        Slider {
            min-width: 160px;
            minimum: -100;
            maximum: 100;
            value: 42;
            enabled: !GallerySettings.widgets-disabled;
        }
    }

    GroupBox {  
        title: "TabWidget";
        
        TabWidget {  
            Tab {
                title: "Tab 1";

                VerticalBox {  
                    alignment: start;

                    GroupBox {  
                        title: "Content of tab 1";

                        HorizontalBox {  
                            alignment: start;
                        
                            Button {  
                                text: "Click me";
                                enabled: !GallerySettings.widgets-disabled;
                            }
                        }
                    }
                }
            }

            Tab {
                title: "Tab 2";

                VerticalBox {  
                    alignment: start;

                    GroupBox {  
                        title: "Content of tab 2";

                        VerticalBox {  
                            alignment: start;
                        
                            CheckBox {  
                                text: "Check me";
                                enabled: !GallerySettings.widgets-disabled;
                            }
                        }
                    }
                }   
            }

            Tab {
                title: "Tab 3";

                VerticalBox {  
                    Text {
                        text: "Content of tab 3";
                    }
                }
            }
        }  
    }
}
